// 车端数据组件 - 基于用户需求说明2.1.8.1

import React, { useState, useEffect } from 'react';
import { useHmiState } from '../hooks/useHmiState';
import {
  Video,
  Camera,
  Play,
  Pause,
  Square,
  Download,
  Settings,
  HardDrive,
  Wifi,
  WifiOff,
  CheckCircle,
  Clock,
  FileText,
  Database
} from 'lucide-react';

const VehicleDataPanel: React.FC = () => {
  const { userRole } = useHmiState();
  const [isRecording, setIsRecording] = useState(false);
  const [recordingTime, setRecordingTime] = useState(0);
  const [selectedDataTypes, setSelectedDataTypes] = useState<string[]>(['video', 'sensor', 'navigation']);
  const [storageUsage] = useState(65); // 百分比
  const [isConnected] = useState(true);

  // 乘客模式下隐藏车端数据面板
  if (userRole.type === 'passenger') {
    return null;
  }

  // 模拟录制时间更新
  useEffect(() => {
    let interval: NodeJS.Timeout;
    if (isRecording) {
      interval = setInterval(() => {
        setRecordingTime(prev => prev + 1);
      }, 1000);
    }
    return () => clearInterval(interval);
  }, [isRecording]);

  // 格式化录制时间
  const formatTime = (seconds: number) => {
    const hours = Math.floor(seconds / 3600);
    const minutes = Math.floor((seconds % 3600) / 60);
    const secs = seconds % 60;
    return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
  };

  // 开始录制
  const startRecording = () => {
    setIsRecording(true);
    setRecordingTime(0);
  };

  // 暂停录制
  const pauseRecording = () => {
    setIsRecording(false);
  };

  // 停止录制
  const stopRecording = () => {
    setIsRecording(false);
    setRecordingTime(0);
  };

  // 下载数据
  const downloadData = () => {
    // 模拟下载
    alert('开始下载车端数据...');
  };

  // 切换数据类型选择
  const toggleDataType = (type: string) => {
    setSelectedDataTypes(prev => 
      prev.includes(type) 
        ? prev.filter(t => t !== type)
        : [...prev, type]
    );
  };

  const dataTypes = [
    { id: 'video', name: '摄像机视频', icon: <Video size={16} />, description: '前后左右摄像头视频流' },
    { id: 'sensor', name: '传感器数据', icon: <Database size={16} />, description: '激光雷达、毫米波雷达数据' },
    { id: 'navigation', name: '导航数据', icon: <FileText size={16} />, description: 'GPS、IMU、路径规划数据' },
    { id: 'control', name: '控制数据', icon: <Settings size={16} />, description: '车辆控制指令和执行状态' },
    { id: 'perception', name: '感知数据', icon: <Camera size={16} />, description: '目标检测、跟踪结果' }
  ];

  return (
    <div className="control-panel">
      <h3 className="text-lg font-semibold mb-4 text-white">车端数据管理</h3>

      {/* 连接状态 */}
      <div className="mb-4">
        <div className={`flex items-center gap-2 px-3 py-2 rounded-lg border ${
          isConnected 
            ? 'border-success-500/30 bg-success-500/10' 
            : 'border-danger-500/30 bg-danger-500/10'
        }`}>
          {isConnected ? <Wifi size={16} className="text-success-400" /> : <WifiOff size={16} className="text-danger-400" />}
          <span className={`text-sm font-medium ${
            isConnected ? 'text-success-400' : 'text-danger-400'
          }`}>
            {isConnected ? '软通动力车端SDK已连接' : '连接断开'}
          </span>
        </div>
      </div>

      {/* 数据类型选择 */}
      <div className="mb-4">
        <h4 className="text-sm font-medium text-gray-300 mb-2">选择录制数据类型</h4>
        <div className="space-y-2">
          {dataTypes.map((type) => (
            <label key={type.id} className="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-700/50 cursor-pointer">
              <input
                type="checkbox"
                checked={selectedDataTypes.includes(type.id)}
                onChange={() => toggleDataType(type.id)}
                className="w-4 h-4 text-primary-600 bg-gray-700 border-gray-600 rounded focus:ring-primary-500"
              />
              <div className="flex items-center gap-2 text-gray-300">
                {type.icon}
                <span className="text-sm">{type.name}</span>
              </div>
              <span className="text-xs text-gray-500 ml-auto">{type.description}</span>
            </label>
          ))}
        </div>
      </div>

      {/* 录制控制 */}
      <div className="mb-4">
        <h4 className="text-sm font-medium text-gray-300 mb-2">录制控制</h4>
        <div className="flex items-center gap-3">
          {!isRecording ? (
            <button
              onClick={startRecording}
              className="hmi-button-primary flex items-center gap-2"
            >
              <Play size={16} />
              开始录制
            </button>
          ) : (
            <>
              <button
                onClick={pauseRecording}
                className="hmi-button-secondary flex items-center gap-2"
              >
                <Pause size={16} />
                暂停
              </button>
              <button
                onClick={stopRecording}
                className="hmi-button-danger flex items-center gap-2"
              >
                <Square size={16} />
                停止
              </button>
            </>
          )}
        </div>

        {/* 录制状态 */}
        {isRecording && (
          <div className="mt-3 p-3 bg-danger-600/20 border border-danger-500/30 rounded-lg">
            <div className="flex items-center gap-2 mb-2">
              <div className="w-3 h-3 bg-danger-500 rounded-full animate-pulse" />
              <span className="text-sm font-medium text-danger-400">正在录制</span>
            </div>
            <div className="flex items-center gap-2 text-sm text-gray-300">
              <Clock size={14} />
              <span>录制时间: {formatTime(recordingTime)}</span>
            </div>
          </div>
        )}
      </div>

      {/* 存储状态 */}
      <div className="mb-4">
        <h4 className="text-sm font-medium text-gray-300 mb-2">存储状态</h4>
        <div className="status-card">
          <div className="flex items-center gap-2 mb-2">
            <HardDrive size={16} className="text-blue-400" />
            <span className="text-sm text-gray-300">存储使用率</span>
          </div>
          <div className="flex items-center gap-2 mb-2">
            <div className="flex-1 bg-gray-700 rounded-full h-2">
              <div
                className={`h-2 rounded-full ${
                  storageUsage > 80 ? 'bg-danger-500' : 
                  storageUsage > 60 ? 'bg-warning-500' : 'bg-success-500'
                }`}
                style={{ width: `${storageUsage}%` }}
              />
            </div>
            <span className="text-sm text-gray-300">{storageUsage}%</span>
          </div>
          <div className="text-xs text-gray-400">
            可用空间: {Math.round((100 - storageUsage) * 2.5)}GB
          </div>
        </div>
      </div>

      {/* 数据管理 */}
      <div className="mb-4">
        <h4 className="text-sm font-medium text-gray-300 mb-2">数据管理</h4>
        <div className="grid grid-cols-2 gap-3">
          <button
            onClick={downloadData}
            className="hmi-button-secondary flex items-center gap-2 justify-center"
          >
            <Download size={16} />
            下载数据
          </button>
          <button className="hmi-button-secondary flex items-center gap-2 justify-center">
            <Settings size={16} />
            存储设置
          </button>
        </div>
      </div>

      {/* 最近录制记录 */}
      <div>
        <h4 className="text-sm font-medium text-gray-300 mb-2">最近录制</h4>
        <div className="space-y-2">
          <div className="flex items-center gap-3 p-2 bg-gray-800/50 rounded-lg">
            <CheckCircle size={16} className="text-success-400" />
            <div className="flex-1">
              <div className="text-sm text-white">录制_20241201_143022</div>
              <div className="text-xs text-gray-400">2024-12-01 14:30 - 15:45 (1小时15分钟)</div>
            </div>
            <button className="text-primary-400 hover:text-primary-300 text-sm">
              下载
            </button>
          </div>
          <div className="flex items-center gap-3 p-2 bg-gray-800/50 rounded-lg">
            <CheckCircle size={16} className="text-success-400" />
            <div className="flex-1">
              <div className="text-sm text-white">录制_20241130_091530</div>
              <div className="text-xs text-gray-400">2024-11-30 09:15 - 10:30 (1小时15分钟)</div>
            </div>
            <button className="text-primary-400 hover:text-primary-300 text-sm">
              下载
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default VehicleDataPanel;
